<template>
  <div class="file-type-container">
    <!-- 左侧分类管理 -->
    <el-card class="category-section">
      <div class="section-header">
        <h3>分类管理（{{ statistics.categoryCount }}）</h3>
        <el-button type="primary" size="small" @click="showAddCategoryDialog">
          + 新建分类
        </el-button>
      </div>

      <!-- 分类树 -->
      <div class="category-tree">
        <el-tree ref="categoryTreeRef" :data="categoryTree" :props="treeProps" node-key="id" :default-expand-all="true"
          :highlight-current="true" @node-click="handleCategoryClick">
          <template #default="{ node, data }">
            <div class="tree-node">
              <span class="node-label">{{ data.categoryName || data.name }}</span>
              <div class="node-actions">
                <el-button type="text" size="small" @click.stop="editCategory(data)">
                  编辑
                </el-button>
                <el-button type="text" size="small" class="delete-btn" @click.stop="deleteCategory(data)">
                  删除
                </el-button>
              </div>
            </div>
          </template>
        </el-tree>
      </div>
    </el-card>

    <!-- 右侧内容区域 -->
    <el-card class="content-section">
      <!-- 分类库标题和操作 -->
      <div class="content-header">
        <div class="header-left">
          <h3>分类库（{{ statistics.categoryCount }}）</h3>
          <div class="search-box">
            <el-input v-model="categoryNameSearch" placeholder="分类名称" clearable @input="handleSearch">
              <template #prefix>
                <el-icon>
                  <Search />
                </el-icon>
              </template>
            </el-input>
          </div>
        </div>
        <div class="header-right">
          <el-button @click="downloadTemplate">
            <el-icon>
              <Download />
            </el-icon>
            下载模板
          </el-button>
          <el-button @click="batchImport">
            <el-icon>
              <Upload />
            </el-icon>
            批量导入分类
          </el-button>
          <el-button type="text" @click="refreshData">
            <el-icon>
              <Refresh />
            </el-icon>
            刷新
          </el-button>
        </div>
      </div>

      <!-- 分类卡片网格 -->
      <div class="category-grid" v-if="filteredCategories.length > 0">
        <div v-for="(category, index) in filteredCategories" :key="`category-card-${category.id}-${index}`"
          class="category-card" :class="{ active: selectedCategoryId === category.id }"
          @click="handleCategoryCardClick(category)">
          <div class="card-header">
            <div class="category-info">
              <h4 class="category-name">{{ category.categoryName }}</h4>
              <span class="file-count">文件数量：{{ category.fileNum || 0 }}</span>
            </div>
          </div>
          <div class="card-actions">
            <el-button type="text" size="small" @click.stop="editCategory(category)">
              <el-icon>
                <Edit />
              </el-icon>
              编辑
            </el-button>
            <el-button type="text" size="small" class="delete-action" @click.stop="deleteCategory(category)">
              <el-icon>
                <Delete />
              </el-icon>
              删除
            </el-button>
          </div>
        </div>
      </div>

      <!-- 空状态展示 -->
      <div class="empty-state" v-else>
        <div class="empty-content">
          <div class="empty-icon">
            <el-icon size="64">
              <FolderOpened />
            </el-icon>
          </div>
          <div class="empty-text">
            <h3>暂无分类数据</h3>
            <p v-if="categoryNameSearch">没有找到匹配 "{{ categoryNameSearch }}" 的分类，请尝试其他关键词</p>
            <p v-else>还没有创建任何文件分类，快来创建第一个分类吧！</p>
          </div>
          <div class="empty-actions" v-if="!categoryNameSearch">
            <el-button type="primary" @click="showAddCategoryDialog">
              <el-icon>
                <Plus />
              </el-icon>
              新建分类
            </el-button>
            <el-button @click="batchImport">
              <el-icon>
                <Upload />
              </el-icon>
              批量导入
            </el-button>
          </div>
        </div>
      </div>
    </el-card>

    <!-- 新建/编辑分类对话框 -->
    <el-dialog v-model="showCategoryDialog" :title="isEditMode ? '编辑分类' : '新建分类'" width="500px"
      @close="resetCategoryForm">
      <el-form ref="categoryFormRef" :model="categoryForm" :rules="categoryRules" label-width="80px">
        <el-form-item label="父级分类">
          <el-tree-select v-model="categoryForm.parentId" :data="filteredCategoryTree" :props="treeProps"
            default-expand-all placeholder="请选择父级分类（不选择则为顶级分类）" clearable check-strictly :render-after-expand="false"
            node-key="id" style="width: 100%" />
        </el-form-item>
        <el-form-item label="分类名称" prop="categoryName">
          <el-input v-model="categoryForm.categoryName" placeholder="请输入分类名称" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showCategoryDialog = false">取消</el-button>
        <el-button type="primary" @click="saveCategoryForm" :loading="saving">
          {{ isEditMode ? '更新' : '创建' }}
        </el-button>
      </template>
    </el-dialog>

    <!-- 批量导入分类对话框 -->
    <el-dialog v-model="showImportDialog" title="批量导入分类" width="600px" @close="resetImportDialog">
      <div class="import-content">
        <div class="import-tips">
          <el-alert title="导入说明" type="info" :closable="false" show-icon>
            <template #default>
              <div class="tips-content">
                <p>1. 请上传Excel格式文件（.xlsx、.xls）</p>
                <p>2. 请按照下载模版填写</p>
                <p>3. 分类数据层级最多三层</p>
              </div>
            </template>
          </el-alert>
        </div>

        <div class="upload-area">
          <el-upload ref="uploadRef" class="upload-demo" drag action="#" :auto-upload="false"
            :file-list="importFileList" :before-upload="beforeUpload" :on-change="handleFileChange"
            :on-remove="handleFileRemove" accept=".xlsx,.xls">
            <el-icon class="el-icon--upload">
              <Upload />
            </el-icon>
            <div class="el-upload__text">
              将Excel文件拖到此处，或<em>点击上传</em>
            </div>
            <template #tip>
              <div class="el-upload__tip">
                只能上传Excel文件（.xlsx、.xls），且不超过10MB
              </div>
            </template>
          </el-upload>
        </div>
      </div>

      <template #footer>
        <el-button @click="showImportDialog = false">取消</el-button>
        <el-button type="primary" @click="confirmImport" :loading="uploading" :disabled="importFileList.length === 0">
          确认导入
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue'
import { ElMessage, ElMessageBox, ElTree } from 'element-plus'
import { useRouter } from 'vue-router'
import {
  Search,
  Refresh,
  Edit,
  Delete,
  Upload,
  Download,
  FolderOpened,
  Plus
} from '@element-plus/icons-vue'
import { categoryList, categoryAdd, categoryEdit, categoryDel, categoryImport, localFile } from '@/api/fileType'

// 接口类型定义
interface Category {
  id: string
  categoryName: string
  parentId?: string | null
  children?: Category[]
  // 兼容显示字段
  name?: string
}

interface CategoryForm {
  id?: string
  categoryName: string
  parentId?: string | null
}

interface Statistics {
  categoryCount: number
}

// 响应式数据
const categoryTreeRef = ref<InstanceType<typeof ElTree>>()
const categoryFormRef = ref()
const categoryNameSearch = ref('')
const selectedCategoryId = ref('')
const showCategoryDialog = ref(false)
const isEditMode = ref(false)
const saving = ref(false)

// 批量导入相关
const showImportDialog = ref(false)
const importFileList = ref<any[]>([])
const uploading = ref(false)

// 分类表单
const categoryForm = reactive<CategoryForm>({
  categoryName: '',
  parentId: null
})

// 表单验证规则
const categoryRules = {
  categoryName: [
    { required: true, message: '请输入分类名称', trigger: 'blur' },
    { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
  ]
}

// 树形结构配置
const treeProps = {
  children: 'children',
  label: 'categoryName',
  value: 'id'
}

// 分类数据
const categories = ref<Category[]>([])

// 分类树数据
const categoryTree = ref<Category[]>([])

// 过滤后的分类树数据（用于父级分类选择）
const filteredCategoryTree = computed(() => {
  if (!isEditMode.value || !categoryForm.id) {
    return categoryTree.value
  }

  // 递归过滤函数，排除当前分类及其子分类
  const filterTree = (items: Category[], excludeId: string): Category[] => {
    return items.filter(item => {
      if (item.id === excludeId) {
        return false
      }
      return true
    }).map(item => ({
      ...item,
      children: item.children ? filterTree(item.children, excludeId) : undefined
    }))
  }

  return filterTree(categoryTree.value, categoryForm.id)
})

// 统计数据
const statistics = ref<Statistics>({
  categoryCount: 0,
})

// 计算属性：过滤分类
const filteredCategories = computed(() => {
  if (!categoryNameSearch.value) {
    return categories.value
  }
  return categories.value.filter(category =>
    (category.categoryName || category.name || '').toLowerCase().includes(categoryNameSearch.value.toLowerCase())
  )
})

// 加载分类数据
const loadCategoryData = async () => {
  try {
    const response = await categoryList()
    console.log('response', response);

    if (response.length > 0) {
      // 将扁平化数据转换为树形结构
      const buildTree = (flatData: any[]): Category[] => {
        if (!flatData || flatData.length === 0) {
          return []
        }

        // 先处理数据格式，确保兼容性
        const processedData = flatData.map((item, index) => ({
          ...item,
          id: String(item.id) || `category_${Date.now()}_${index}`,
          categoryName: item.categoryName || item.name || '',
          parentId: item.parentId ? String(item.parentId) : null,
          name: item.categoryName || item.name, // 兼容显示字段
          children: []
        }))

        console.log('处理后的数据:', processedData)

        // 创建id到节点的映射
        const nodeMap = new Map()
        processedData.forEach(item => {
          nodeMap.set(item.id, { ...item, children: [] })
        })

        console.log('节点映射:', nodeMap)

        // 构建树形结构
        const tree: Category[] = []
        const orphanNodes: Category[] = []

        // 先添加所有顶级节点
        processedData.forEach(item => {
          const node = nodeMap.get(item.id)
          if (item.parentId === null || item.parentId === undefined || item.parentId === '') {
            tree.push(node)
          }
        })

        // 再处理子节点
        processedData.forEach(item => {
          if (item.parentId !== null && item.parentId !== undefined && item.parentId !== '') {
            const node = nodeMap.get(item.id)
            const parent = nodeMap.get(item.parentId)
            if (parent) {
              parent.children.push(node)
            } else {
              // 如果找不到父节点，记录为孤儿节点
              orphanNodes.push(node)
              console.warn(`找不到父节点 ${item.parentId}，节点 ${item.id} 将作为顶级节点处理`)
            }
          }
        })

        // 将孤儿节点添加到顶级
        tree.push(...orphanNodes)

        console.log('构建的树形结构:', tree)
        return tree
      }

      categoryTree.value = buildTree(response || [])

      // 扁平化处理用于右侧显示
      const flattenCategories = (items: Category[]): Category[] => {
        let result: Category[] = []
        items.forEach(item => {
          result.push(item)
          if (item.children && item.children.length > 0) {
            result = result.concat(flattenCategories(item.children))
          }
        })
        return result
      }
      categories.value = flattenCategories(categoryTree.value)
      updateStatistics()
    } else {
    }
  } catch (error) {
    console.error('加载分类数据失败:', error)
  }
}

/**
 * 显示新建分类对话框
 */
const showAddCategoryDialog = () => {
  isEditMode.value = false
  showCategoryDialog.value = true
}

/**
 * 编辑分类
 */
const editCategory = (category: Category) => {
  isEditMode.value = true
  categoryForm.id = category.id
  categoryForm.categoryName = category.categoryName || category.name || ''
  categoryForm.parentId = category.parentId
  showCategoryDialog.value = true
}

/**
 * 删除分类
 */
const deleteCategory = async (category: Category) => {
  try {
    await ElMessageBox.confirm(
      `删除分类会将该类型下面的所有文件全部删除，请确定要删除分类 "${category.categoryName}" 吗？`,
      '删除确认',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )

    // 调用删除API
    const response = await categoryDel({ id: String(category.id), isDelFile: 1 })
    if (response) {
      // 重新加载数据
      await loadCategoryData()
    } else {
      ElMessage.error(response.message || '删除失败')
    }
  } catch (error: any) {
    if (error !== 'cancel') {
      console.error('删除分类失败:', error)
      ElMessage.error('删除失败')
    }
  }
}

/**
 * 保存分类表单
 */
const saveCategoryForm = async () => {
  try {
    // 表单验证
    await categoryFormRef.value?.validate()
    saving.value = true

    let response
    if (isEditMode.value) {
      // 编辑模式 - 调用编辑接口
      const params = {
        id: categoryForm.id,
        categoryName: categoryForm.categoryName,
        parentId: categoryForm.parentId || null
      }
      response = await categoryEdit(params)
    } else {
      // 新增模式 - 调用新增接口
      const params = {
        categoryName: categoryForm.categoryName,
        parentId: categoryForm.parentId || null
      }
      response = await categoryAdd(params)
    }
    console.log('response', response);

    if (response) {
      showCategoryDialog.value = false
      resetCategoryForm()
      // 重新加载数据
      await loadCategoryData()
    } else {
      ElMessage.error(response.message || '保存失败')
    }
  } catch (error) {
    console.error('保存失败:', error)
    ElMessage.error('保存失败')
  } finally {
    saving.value = false
  }
}

/**
 * 重置分类表单
 */
const resetCategoryForm = () => {
  categoryForm.id = undefined
  categoryForm.categoryName = ''
  categoryForm.parentId = null
  isEditMode.value = false
  categoryFormRef.value?.clearValidate()
}

/**
 * 处理分类点击
 */
const handleCategoryClick = (data: Category) => {
  selectedCategoryId.value = data.id
  // TODO: 根据分类筛选文件
}

/**
 * 选择分类
 */
const selectCategory = (category: Category) => {
  selectedCategoryId.value = category.id
  // TODO: 显示该分类下的文件
}

// 获取路由实例
const router = useRouter()

/**
 * 处理分类卡片点击事件
 */
const handleCategoryCardClick = (category: Category) => {
  // 跳转到allFiles页面并传递分类id
  console.log('category', category);

  router.push({
    path: '/fileManagement/fileManagement/allFiles/index',
    query: {
      categoryId: category.id
    }
  })
}

/**
 * 搜索处理
 */
const handleSearch = () => {
  // 搜索逻辑已在计算属性中处理
}

/**
 * 刷新数据
 */
const refreshData = async () => {
  await loadCategoryData()
  ElMessage.success('数据已刷新')
}

/**
 * 下载Excel模板
 */
const downloadTemplate = async () => {
  try {
    // 调用下载模板接口，传入模板文件名
    const fileName = 'category_template.xlsx' // 模板文件名
    const response = await localFile(fileName)
    
    // 获取blob数据（当isTransformResponse为false时，需要访问response.data）
    const blob = response.data || response
    
    // 检查响应是否为有效的blob
    if (!blob || !(blob instanceof Blob)) {
      throw new Error('服务器返回的文件数据无效')
    }
    
    // 检查文件大小
    if (blob.size === 0) {
      throw new Error('下载的文件为空')
    }
    
    // 创建下载链接
    const url = window.URL.createObjectURL(blob)
    const link = document.createElement('a')
    link.href = url
    link.download = fileName
    link.style.display = 'none'
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
    window.URL.revokeObjectURL(url)
    
    ElMessage.success(`模板下载成功，文件大小: ${(blob.size / 1024).toFixed(2)}KB`)
  } catch (error) {
    console.error('下载模板失败:', error)
    ElMessage.error(`下载模板失败: ${error.message || '请稍后重试'}`)
  }
}

/**
 * 批量导入分类
 */
const batchImport = () => {
  showImportDialog.value = true
}

/**
 * 重置导入对话框
 */
const resetImportDialog = () => {
  importFileList.value = []
  uploading.value = false
}

/**
 * 文件上传前验证
 */
const beforeUpload = (file: any) => {
  // 检查文件类型
  const isExcel = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
    file.type === 'application/vnd.ms-excel' ||
    file.name.endsWith('.xlsx') ||
    file.name.endsWith('.xls')

  if (!isExcel) {
    ElMessage.error('只能上传Excel格式文件！')
    return false
  }

  // 检查文件大小（10MB）
  const isLt10M = file.size / 1024 / 1024 < 10
  if (!isLt10M) {
    ElMessage.error('上传文件大小不能超过10MB！')
    return false
  }

  return true
}

/**
 * 处理文件变化
 */
const handleFileChange = (file: any, fileList: any[]) => {
  // 限制只能上传一个文件
  if (fileList.length > 1) {
    importFileList.value = [fileList[fileList.length - 1]]
  } else {
    importFileList.value = fileList
  }
}

/**
 * 移除文件
 */
const handleFileRemove = () => {
  importFileList.value = []
}

/**
 * 确认导入
 */
const confirmImport = async () => {
  if (importFileList.value.length === 0) {
    ElMessage.warning('请先选择要导入的Excel文件')
    return
  }

  try {
    uploading.value = true

    // 创建FormData对象
    const formData = new FormData()
    formData.append('file', importFileList.value[0].raw)

    // 调用导入接口
    await categoryImport(formData)

    ElMessage.success('批量导入成功！')
    showImportDialog.value = false
    resetImportDialog()

    // 重新加载分类数据
    await loadCategoryData()

  } catch (error) {
    console.error('批量导入失败:', error)
    ElMessage.error('批量导入失败，请检查文件格式和内容')
  } finally {
    uploading.value = false
  }
}

/**
 * 导出分类配置
 */
const exportCategories = () => {
  ElMessage.info('导出功能开发中...')
  // TODO: 实现导出功能
}

/**
 * 更新统计信息
 */
const updateStatistics = () => {
  statistics.value.categoryCount = categories.value.length
}

/**
 * 组件挂载时初始化数据
 */
onMounted(() => {
  loadCategoryData()
})
</script>

<style scoped lang="scss">
.file-type-container {
  display: flex;
  height: calc(100vh - 120px);
  gap: 16px;
  padding: 16px;
}

.category-section {
  width: 300px;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.content-section {
  flex: 1;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  overflow: auto;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;

  h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
  }
}

.category-tree {
  height: calc(100% - 60px);
  overflow: auto;

  .tree-node {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;

    .node-label {
      flex: 1;
      font-size: 14px;
    }

    .node-actions {
      opacity: 0;
      transition: opacity 0.3s ease;

      .delete-btn {
        color: #f56c6c;
      }
    }

    &:hover .node-actions {
      opacity: 1;
    }
  }
}

.content-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;

  .header-left {
    display: flex;
    align-items: center;
    gap: 24px;

    h3 {
      margin: 0;
      font-size: 18px;
      font-weight: 600;
    }

    .search-box {
      display: flex;
      gap: 12px;

      .el-input {
        width: 200px;
      }
    }
  }
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}

.category-card {
  border: 1px solid #e5e6eb;
  border-radius: 8px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 5px 8px rgba(0, 0, 0, 0.06);

  &:hover {
    border-color: #409eff;
    box-shadow: 0 4px 12px rgba(64, 158, 255, 0.15);
    transform: translateY(-2px);
  }

  &.active {
    border-color: #409eff;
  }
}

.card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.category-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.category-info {
  text-align: center;
  flex: 1;

  .category-name {
    margin: 0 0 4px 0;
    font-size: 16px;
    font-weight: 600;
  }

  .file-count {
    margin: 0;
    font-size: 12px;
  }
}

// 批量导入对话框样式
.import-content {
  .import-tips {
    margin-bottom: 20px;

    .tips-content {
      p {
        margin: 4px 0;
        font-size: 14px;
        line-height: 1.5;
      }
    }
  }

  .upload-area {
    .upload-demo {
      width: 100%;

      .el-upload {
        width: 100%;
      }

      .el-upload-dragger {
        width: 100%;
        height: 180px;

        .el-icon--upload {
          font-size: 48px;
          margin-bottom: 16px;
        }

        .el-upload__text {
          font-size: 14px;

          em {
            color: #409eff;
            font-style: normal;
          }
        }
      }

      .el-upload__tip {
        font-size: 12px;
        color: #909399;
        margin-top: 8px;
        text-align: center;
      }
    }
  }
}

.card-actions {
  display: flex;
  justify-content: center;
  gap: 8px;
  opacity: 0;
  transition: opacity 0.3s ease;

  .delete-action {
    color: #f56c6c;
  }
}

.category-card:hover .card-actions {
  opacity: 1;
}

.batch-actions {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
}

.statistics {
  display: flex;
  gap: 32px;
  padding: 16px;
  border-radius: 8px;
}

.stat-item {
  text-align: center;

  .stat-label {
    font-size: 12px;
    color: #909399;
    margin-bottom: 4px;
  }

  .stat-value {
    font-size: 24px;
    font-weight: 600;
    color: #303133;
  }
}

.icon-selector {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.icon-option {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;

  &:hover {
    border-color: #409eff;
  }

  &.selected {
    border-color: #409eff;
    background: #f0f9ff;
    color: #409eff;
  }
}

.color-selector {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.color-option {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.3s ease;

  &:hover {
    transform: scale(1.1);
  }

  &.selected {
    border-color: #303133;
    transform: scale(1.2);
  }
}

// 空状态样式
.empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  padding: 40px 20px;
}

.empty-content {
  text-align: center;
  max-width: 400px;
}

.empty-icon {
  margin-bottom: 24px;
  color: #c0c4cc;
}

.empty-text {
  margin-bottom: 32px;

  h3 {
    margin: 0 0 12px 0;
    font-size: 18px;
    font-weight: 500;
    color: #303133;
  }

  p {
    margin: 0;
    font-size: 14px;
    color: #909399;
    line-height: 1.6;
  }
}

.empty-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;

  .el-button {
    min-width: 120px;
  }
}

// 响应式设计
@media (max-width: 1200px) {
  .file-type-container {
    flex-direction: column;
    height: auto;
  }

  .category-section {
    width: 100%;
    height: 300px;
  }

  .category-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }
}

@media (max-width: 768px) {
  .file-type-container {
    padding: 12px;
    gap: 12px;
  }

  .content-section {
    padding: 16px;
  }

  .content-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;

    .header-left {
      flex-direction: column;
      align-items: flex-start;
      gap: 12px;
      width: 100%;

      .search-box {
        width: 100%;

        .el-input {
          flex: 1;
        }
      }
    }
  }

  .category-grid {
    grid-template-columns: 1fr;
  }

  .statistics {
    justify-content: space-around;
  }

  .empty-state {
    min-height: 300px;
    padding: 20px 16px;
  }

  .empty-content {
    max-width: 100%;
  }

  .empty-icon {
    margin-bottom: 20px;

    .el-icon {
      font-size: 48px !important;
    }
  }

  .empty-text {
    margin-bottom: 24px;

    h3 {
      font-size: 16px;
    }

    p {
      font-size: 13px;
    }
  }

  .empty-actions {
    flex-direction: column;
    align-items: center;

    .el-button {
      width: 100%;
      max-width: 200px;
    }
  }
}
</style>